<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>QQ音乐 - 首页</title>
    <link rel="stylesheet" href="styles/music.css" />
    <script src="scripts/music.js"></script>
  </head>
  <body>
    <header>
      <div class="header-inner">
        <img src="images/qqmusic.png" />
      </div>
    </header>
    <main>
      <!-- 歌单推荐 -->
      <section class="section1">
        <h2>歌单推荐</h2>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">为你推荐</a>
          <a href="#" class="tag-item">运动</a>
          <a href="#" class="tag-item">网络歌曲</a>
          <a href="#" class="tag-item">思念</a>
          <a href="#" class="tag-item">官方歌单</a>
          <a href="#" class="tag-item">情歌</a>
        </div>
        <div class="playlist-row" id="playlist"></div>
      </section>

      <!-- 新歌首发 -->
      <section class="section2">
        <h2>新歌首发</h2>
        <div class="tag-list">
          <span class="iconplay"
            ><img src="images/icon_play.png" />播放全部</span
          >
          <a href="#" class="tag-item tag-active">最新</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="new-grid" id="songlist"></div>
      </section>
      <!-- MV -->
      <section class="section3">
        <h2>MV</h2>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">精选</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="mv-grid" id="mvlist"></div>
      </section>
    </main>
    <footer></footer>
    <script>
      fetch("task.json")
        .then((res) => res.json())
        .then((data) => {
          renderPlaylists(data.playlist);
          renderSongs(data.songlist);
          renderMVs(data.mvlist);
        })
        .catch((err) => console.error("加载 JSON 失败:", err));
      function renderPlaylists(list) {
        const container = document.getElementById("playlist");
        list.forEach((item) => {
          const html = `
      <div class="playlist">
       <div class="cover-wrap">
        <img src="${item.cover}" class="cover-img1">
        <div class="cover-mask"></div>
         <img src="images/cover_play.png" class="cover-play" />
        </div>
        <div class="info">
          <div class="title">${item.title}</div>
          <div class="count">播放量：${(item.listen_num / 10000).toFixed(
            1
          )}万</div>
        </div>
      </div>`;
          container.insertAdjacentHTML("beforeend", html);
        });
      }

      function renderSongs(list) {
        const container = document.getElementById("songlist");
        list.forEach((song) => {
          const min = Math.floor(song.interval / 60);
          const sec = (song.interval % 60).toString().padStart(2, "0");
          const html = `
      <div class="song-item">
        <div class="cover-wrap">
        <img src="${song.cover}"  class="cover-img2">
        <div class="cover-mask"></div>
         <img src="images/cover_play.png" class="cover-play" />
         </div>
        <div class="song-info">
          <div class="song-title">${song.name}</div>
          <div class="song-artist">${song.singer.join("/ ")}</div>
        </div>
        <div class="song-time">${min}:${sec}</div>
      </div>`;
          container.insertAdjacentHTML("beforeend", html);
        });
      }

      function renderMVs(list) {
        const container = document.getElementById("mvlist");
        list.forEach((mv) => {
          const html = `
      <div class="mv-item">
        <div class="cover-wrap">
        <img src="${mv.cover}"  class="cover-img3">
          <div class="cover-mask"></div>
         <img src="images/cover_play.png" class="cover-play" />
         </div>
          <div class="mv-meta">
          <div class="mv-name">${mv.title}</div>
            <div class="mv-singer">${mv.singer}</div>
          <div class="mv-views"><img src="images/icon_listen.png"> ${mv.listen_num}</div>
        </div>
      </div>`;
          container.insertAdjacentHTML("beforeend", html);
        });
      }
    </script>
  </body>
</html>
